package samples.examples.photo_swipe.views;

import js.Dom;
import zpartanlite.Enumerables;
import divtastic.js.DisplayDiv;
import zpartanlite.Pages;
import divtastic.js.application.views.WindowView;
import divtastic.js.application.views.SwipeView;


using divtastic.js.Drawing;
class PicSwipeView
{
    
    
    
    private var _holder:        DisplayDiv;
    private var _win:           WindowView;
    private var pageImages:     Pages<String>;
    private var texts:          Array<String>;
    private var swipeView:      SwipeView;
    private var imageHolderTxt: DisplayDiv;
    private var innerTxt:       DisplayDiv;
    
    
    
    public function new( holder_: DisplayDiv, win_: WindowView )
    {
        
        _holder     = holder_;
        _win        = win_;
        var images  =   [ 'images/elephant.png'
                        , 'images/deerandzebra.png'
                        , 'images/crocodile.png'
                        , 'images/waterbuck.png'
                        , 'images/hippopotamus.png'
                        , 'images/zebra.png'
                        ];
        
        texts       =   [ 'Elephant'
                        , 'Deer and Zebra'
                        , 'Crocodile'
                        , 'Water Buck'
                        , 'Hippopotamus'
                        , 'Zebra'
                        ];
            
        for( i in images )
        {
            new DisplayDiv( i );
        }
        pageImages = new Pages( images );
        trace( pageImages.previous() );
        pageImages.circle = true;
            
        trace( pageImages.curr );
        var imageHolder                 = new DisplayDiv( pageImages.curr );
        imageHolder.x                   = 10;
        imageHolder.y                   = 36;
        imageHolder.width               = 400;
        imageHolder.height              = 400;
        var imageOld                        = new DisplayDiv( );
        imageOld.x                      = 10;
        imageOld.y                      = 36;
        imageOld.width                  = 400;
        imageOld.height                 = 400;
        var inner                           = new DisplayDiv( );
        inner.width                     = 400;
        inner.height                    = 400;
        inner.x                         = 0;
        inner.y                         = 0;
        imageOld.addChild( inner );
        _holder.addChild( imageOld );
        _holder.addChild( imageHolder );

        imageHolderTxt                  = new DisplayDiv();

        var txStyle                     = imageHolderTxt.getStyle();
        imageHolder.addChild( imageHolderTxt );
        imageHolderTxt.x                = 25;
        imageHolderTxt.y                = 315;
        imageHolderTxt.height           = 1000;
        imageHolderTxt.width            = 200;
        txStyle.fontFamily              = 'Arial';
        txStyle.color                   = '#000000';
        txStyle.lineHeight              = '1.1';
        txStyle.letterSpacing           = '1px';
        txStyle.fontSize                = '15';
            
        imageHolderTxt.fixedTextHeight  = 100;
        imageHolderTxt.fixedTextWidth   = 250;
        imageHolderTxt.updateText( texts[ pageImages.getIndex() ] );
            
        innerTxt                        = new DisplayDiv();
        inner.addChild( innerTxt );//innerTxt.fill = '#ccffcc';*/*/*/
        innerTxt.x                      = 25;
        innerTxt.y                      = 315;
        innerTxt.height                 = 1000;
        innerTxt.width                  = 200;
        innerTxt.fixedTextHeight        = 1000;
        innerTxt.fixedTextWidth         = 250;
        innerTxt.updateText( '' );
        innerTxt.width                  = 0;
        var txStyle2                    = innerTxt.getStyle();
        txStyle2.fontFamily             = 'Arial';
        txStyle2.color                  = '#000000';//'#d67297';
        txStyle2.lineHeight             = '1.1';
        txStyle2.letterSpacing          = '1px';
        txStyle2.fontSize               = '15';
            
        swipeView = new SwipeView( Horizontal, 400, imageHolder, imageOld, inner, pageImages );//300
        swipeView.pageChange.add( updateText );
        createNav();
            
    }
        
        
    private function updateText()
    {
            
        imageHolderTxt.updateText( texts[ swipeView.index1 ] );
        innerTxt.updateText( texts[ swipeView.index0 ] );
            
    }
        
        
    private function createNav(): HtmlDom
    {

        var nav              = new DisplayDiv();
        nav.x                                          = 0;
        nav.y                                          = 347;
        nav.width                                      = 400;
        nav.height                                     = 100;
        nav.visible                                    = true;
        _holder.addChild( nav );
        createLeftArrow( nav );
        createRightArrow( nav );
        return nav.getInstance();
            
    }
        
        
    private function createLeftArrow( aTab: DisplayDiv ): HtmlDom
    {
            
        var left   = new DisplayDiv();
        left.x                            = 5;
        left.y                            = 0;
        aTab.addChild( left );
        var grey6       = 0x666666;
        var grey36      = 0x363636;
        left.drawGradTriangle( 4, 4, 12, 15, grey36, grey6, East, 1, Horizontal );
        left.getStyle().cursor = 'pointer';
        left.press.add( pageImages.next ) ;
        return left.getInstance() ;
            
    }
        
        
    private function createRightArrow( aTab: DisplayDiv ): HtmlDom
    {
            
        var right  = new DisplayDiv();
        right.x                            = 395;
        right.y                            = 0;
        aTab.addChild( right );
        var grey6       = 0x666666;
        var grey36      = 0x363636;
        right.drawGradTriangle( 4, 4, 12, 15, grey36, grey6, West, 1, Horizontal );
        right.getStyle().cursor = 'pointer' ;
        right.press.add( pageImages.previous ) ;
        return right.getInstance() ;
            
    }
        
        
}